 
/*
 * @Author: ZhouNan
 * @Date: 2022-04-06 21:53:40
 * @LastEditors: ZhouNan
 * @LastEditTime: 2022-04-21 21:36:08
 * @FilePath: \export_ts\src\panels\setting\setting.ts
 * @Description: 
 */

import { defineComponent, ref , computed} from "vue";
import util from "../../util";
import config from "../../config";

const Config = config.getExportConfig()
const ConfigList = Config.comp_flags;
const CompList = util.getAllComponet();
const TotalCompCnt = CompList.length;

export default defineComponent({
    props: {
        // flag_input: 
    },
    setup(props) {
        
        /** 导出的节点的标识 */
        const flag_input = ref(Config.export_flag);
        const exportProperty = ref(Config.export_property);
        /** 是否绑定组件 */
        const bindComp = ref(Config.bind_comp);
        /** 已有的配置 */
        const compFlags = ref(ConfigList);
        /** 可以配置的组件 */
        const compList = ref(filtUnconfigedKey(CompList, ConfigList));
        /** 管理模式下隐藏的节点 */
        const mgr_model_hide = ref("visible");
        /** 管理模式下显示的节点 */
        const mgr_model_show = ref("hidden");
        const err_tips = ref(['']);
        const add_tips = ref('');
        const save_tips = ref('');
        const save_err = ref('');
        const del_select = ref([false]);
        const del_select_all = ref(false);
        /** 点击了管理按钮 */
        function onClickBtnMgr() {
            emptyTips()
            del_select.value = [];
            del_select_all.value = false;
            if (mgr_model_hide.value == 'visible') {
                mgr_model_hide.value = "hidden";
                mgr_model_show.value = 'visible';
            }
            else {
                mgr_model_hide.value = "visible";
                mgr_model_show.value = 'hidden';
            }
        }
        /** 监听添加按钮 */
        function onClickAdd() {
            emptyTips()
            if (compFlags.value.length < TotalCompCnt) {
                compFlags.value.unshift({key: '', value: ''});
            } else {
                add_tips.value = '已达到可配置上限~'
            }
        }
        /** 监听选项改变 */
        function onSelectChange() {
            emptyTips()
            compList.value = filtUnconfigedKey(CompList, ConfigList);
        }

        /** 保存 */
        function onClickSave() {
            emptyTips()
            if (flag_input.value.trim() == '') {
                save_err.value = '导出标识不能为空';
                return;
            }
            for (let i = 0; i < compFlags.value.length; i++) {
                let info = compFlags.value[i];
                let tips = '';
                if (info.key == '' || info.value.trim() == '') {
                    tips += '本条配置非法 已忽略 ↑';
                }
                err_tips.value[i] = tips;
            }
            config.saveCompFlagsConfig(compFlags.value);
            saveAllConfig()
            save_tips.value = '已保存';
        }

        function onClickDelSelect(evt:any, index: number) {
            let arr = del_select.value;
            arr[index] = evt.target.value;
            for (let i = 0; i < compFlags.value.length; i++) {
                if (!arr[i]) {
                    del_select_all.value = false;
                    return;
                }
            }
            del_select_all.value = true;
        }

        // 全选
        function onClickDelSelectAll(evt: any) {
            del_select_all.value = evt.target.value;
            let arr = del_select.value;
            for (let i = 0; i < compFlags.value.length; i++) {
                arr[i] = del_select_all.value;
            }
        }

        // 是否绑定组件
        function onClickBindComp(evt: any) {
            save_tips.value = ''
            bindComp.value = evt.target.value;
        }

        // 是否添加property
        function onClickExportProperty(evt: any) {
            save_tips.value = ''
            exportProperty.value = evt.target.value;
        }

        function onClickDelect() {
            let compFlagArr = compFlags.value
            let length = compFlagArr.length;
            let delArr = del_select.value;
            for (let i = 0; i < length; ) {
                if (delArr[i]) {
                    delArr.splice(i, 1);
                    compFlagArr.splice(i, 1);
                }
                else {
                    i++;
                }
            }
        }

        function saveAllConfig() {
            let obj = {
                export_flag: flag_input.value,
                export_property: exportProperty.value,
                bind_comp: bindComp.value,
                comp_flags: compFlags.value,
            }
            config.saveExportConfig(obj);
        }

        function emptyTips() {
            err_tips.value = [];
            add_tips.value = '';
            save_tips.value = '';
            save_err.value = '';
        }

        return {
            flag_input,
            bindComp,
            exportProperty,
            compFlags,
            compList,
            err_tips,
            add_tips,
            save_tips,
            save_err,
            mgr_model_hide,
            mgr_model_show,
            del_select,
            del_select_all,
            onClickBtnMgr,
            onClickAdd,
            onSelectChange,
            onClickSave,
            onClickDelSelect,
            onClickDelSelectAll,
            onClickBindComp,
            onClickExportProperty,
            onClickDelect,
        }
    },
    // beforeUnmount() { // 关闭前存储配置
    //     this.saveAllConfig();
    // }
})

function filtUnconfigedKey(allComp: Array<string>, config: {key: string, value:string}[]): string[] {
    let arr = allComp.filter((key) => {
        return (config.findIndex(o => {return o.key == key}) == -1);
    })
    // if (arr.length == 0) {
    //     return ;
    // }
    return [''].concat(arr);
}